import {
  View,
  Text,
  Image,
  TouchableOpacity,
  StyleSheet,
  ScrollView,
} from 'react-native';
import React, { useState } from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';

// 模拟课程数据
type Course = {
  id: string;
  title: string;
  cover: string;
  status: string;
  progress: string;
  type: string;
};

const StudySreen = () => {
  // 当前选中的顶部标签（学习/课表）
  const [activeTab, setActiveTab] = useState<'learning' | 'schedule'>(
    'learning',
  );
  // 当前选中的课程分类
  const [activeCourseTab, setActiveCourseTab] = useState<
    'myCourses' | 'myColumns' | 'all'
  >('myCourses');

  // 模拟课程数据
  const courses: Course[] = [
    {
      id: '1',
      title: '嵌入式底层开发必备-计算机微机原理与接口技术',
      cover:
        'https://2403a.oss-cn-beijing.aliyuncs.com/2025/03/26/909c0aa9318d4b938553841896d052dcbanner1.png',
      status: '免费课程',
      progress: '最近学习 · 已学0%',
      type: 'free',
    },
    {
      id: '2',
      title: 'Cocos2d-x坦克大战--下',
      cover:
        'https://2403a.oss-cn-beijing.aliyuncs.com/2025/03/26/befb715275454cfcb5c19aed501da906banner2.png',
      status: '免费课程',
      progress: '已学0%',
      type: 'free',
    },
    {
      id: '3',
      title: '【首发】零基础快速上手HarmonyOS（鸿蒙）开发',
      cover:
        'https://2403a.oss-cn-beijing.aliyuncs.com/2025/03/26/8471f72b6c1842a78988d86844588737banner3.png',
      status: '免费课程',
      progress: '已学0%',
      type: 'free',
    },
    {
      id: '4',
      title: '大数据工程师 2024版',
      cover:
        'https://2403a.oss-cn-beijing.aliyuncs.com/2025/09/04/d354cf8ce4bb4671b187f8484f3a5a34banner.jpg',
      status: '体系课',
      progress: '已学29%',
      type: 'system',
    },
  ];

  return (
    <View style={styles.container}>
      {/* 顶部导航栏 */}
      <View style={styles.header}>
        <TouchableOpacity
          style={[
            styles.headerTab,
            activeTab === 'learning' && styles.headerTabActive,
          ]}
          onPress={() => setActiveTab('learning')}
        >
          <Text
            style={[
              styles.headerTabText,
              activeTab === 'learning' && styles.headerTabTextActive,
            ]}
          >
            学习
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={[
            styles.headerTab,
            activeTab === 'schedule' && styles.headerTabActive,
          ]}
          onPress={() => setActiveTab('schedule')}
        >
          <Text
            style={[
              styles.headerTabText,
              activeTab === 'schedule' && styles.headerTabTextActive,
            ]}
          >
            课表
          </Text>
        </TouchableOpacity>
      </View>

      {/* 功能按钮栏 */}
      <View style={styles.functionBar}>
        <TouchableOpacity style={styles.functionButton}>
          <Image
            source={require('../../static/study/xihuan.png')}
            style={styles.functionIcon}
          />
          <Text style={styles.functionText}>收藏</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.functionButton}>
          <Image
            source={require('../../static/study/wenda.png')}
            style={styles.functionIcon}
          />
          <Text style={styles.functionText}>问答</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.functionButton}>
          <Image
            source={require('../../static/study/biji.png')}
            style={styles.functionIcon}
          />
          <Text style={styles.functionText}>笔记</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.functionButton}>
          <Image
            source={require('../../static/study/shouji.png')}
            style={styles.functionIcon}
          />
          <Text style={styles.functionText}>手记</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.functionButton}>
          <Image
            source={require('../../static/study/xiazai.png')}
            style={styles.functionIcon}
          />
          <Text style={styles.functionText}>下载</Text>
        </TouchableOpacity>
      </View>

      {/* 课程分类标签 */}
      <View style={styles.courseTabs}>
        <TouchableOpacity
          style={[
            styles.courseTab,
            activeCourseTab === 'myCourses' && styles.courseTabActive,
          ]}
          onPress={() => setActiveCourseTab('myCourses')}
        >
          <Text
            style={[
              styles.courseTabText,
              activeCourseTab === 'myCourses' && styles.courseTabTextActive,
            ]}
          >
            我的课程
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={[
            styles.courseTab,
            activeCourseTab === 'myColumns' && styles.courseTabActive,
          ]}
          onPress={() => setActiveCourseTab('myColumns')}
        >
          <Text
            style={[
              styles.courseTabText,
              activeCourseTab === 'myColumns' && styles.courseTabTextActive,
            ]}
          >
            我的专栏
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={[
            styles.courseTab,
            activeCourseTab === 'all' && styles.courseTabActive,
          ]}
          onPress={() => setActiveCourseTab('all')}
        >
          <Text
            style={[
              styles.courseTabText,
              activeCourseTab === 'all' && styles.courseTabTextActive,
            ]}
          >
            全部
          </Text>
          <Image
            source={require('../../static/study/saixuan.png')}
            style={styles.courseTabArrow}
          />
        </TouchableOpacity>
      </View>

      {/* 课程列表 */}
      <ScrollView
        style={styles.courseList}
        showsVerticalScrollIndicator={false}
      >
        {courses.map(course => (
          <View key={course.id} style={styles.courseItem}>
            <Image source={{ uri: course.cover }} style={styles.courseCover} />
            <View style={styles.courseInfo}>
              <Text style={styles.courseTitle} numberOfLines={2}>
                {course.title}
              </Text>
              <Text
                style={[
                  styles.courseStatus,
                  course.type === 'system' && styles.systemCourse,
                ]}
              >
                {course.status}
              </Text>
              <Text style={styles.courseProgress}>{course.progress}</Text>
            </View>
            <TouchableOpacity style={styles.courseMoreButton}>
              <Image
                source={{
                  uri: 'https://img.alicdn.com/imgextra/i1/O1CN01eK5N8b1r3o4oZq2bV_!!6000000005933-2-tps-16-48.png',
                }}
                style={styles.courseMoreIcon}
              />
            </TouchableOpacity>
          </View>
        ))}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    flexDirection: 'row',
    paddingHorizontal: 16,
    paddingVertical: 12,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  headerTab: {
    paddingVertical: 8,
    paddingHorizontal: 12,
  },
  headerTabActive: {
    borderBottomWidth: 2,
    borderBottomColor: '#1ba5fd',
  },
  headerTabText: {
    fontSize: 16,
    color: '#666',
  },
  headerTabTextActive: {
    color: '#1ba5fd',
    fontWeight: 'bold',
  },
  functionBar: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    paddingVertical: 16,
    backgroundColor: '#fff',
    marginBottom: 10,
  },
  functionButton: {
    alignItems: 'center',
  },
  functionIcon: {
    width: 20,
    height: 20,
    marginBottom: 4,
  },
  functionText: {
    fontSize: 12,
    color: '#666',
  },
  courseTabs: {
    flexDirection: 'row',
    paddingHorizontal: 16,
    paddingVertical: 12,
    backgroundColor: '#fff',
    marginBottom: 10,
  },
  courseTab: {
    flexDirection: 'row',
    alignItems: 'center',
    marginRight: 24,
  },
  courseTabActive: {
    // 选中状态的样式
  },
  courseTabText: {
    fontSize: 14,
    color: '#666',
  },
  courseTabTextActive: {
    color: '#1ba5fd',
    fontWeight: 'bold',
  },
  courseTabArrow: {
    width: 16,
    height: 16,
    marginLeft: 4,
  },
  courseList: {
    flex: 1,
  },
  courseItem: {
    flexDirection: 'row',
    backgroundColor: '#fff',
    marginBottom: 10,
    padding: 12,
  },
  courseCover: {
    width: 120,
    height: 80,
    borderRadius: 8,
  },
  courseInfo: {
    flex: 1,
    marginLeft: 12,
    justifyContent: 'space-between',
  },
  courseTitle: {
    fontSize: 14,
    fontWeight: '500',
    color: '#333',
    lineHeight: 20,
  },
  courseStatus: {
    fontSize: 12,
    color: '#1ba5fd',
    backgroundColor: '#e6f4ff',
    paddingHorizontal: 6,
    paddingVertical: 2,
    borderRadius: 4,
    alignSelf: 'flex-start',
  },
  systemCourse: {
    color: '#f7a300',
    backgroundColor: '#fff7e6',
  },
  courseProgress: {
    fontSize: 12,
    color: '#999',
  },
  courseMoreButton: {
    justifyContent: 'center',
    paddingLeft: 8,
  },
  courseMoreIcon: {
    width: 16,
    height: 48,
  },
});

export default StudySreen;
